{% extends 'base.html' %}
{% load static %}

{% block title %}Page Not Found — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  .err-wrap {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
  }
  .err-code {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #1a56db, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .err-icon {
    font-size: 5rem;
    opacity: .15;
  }
  .err-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #1a56db, #0ea5e9);
    border-radius: 2px;
    margin: 1.25rem auto;
  }
</style>
{% endblock %}

{% block content %}
<div class="err-wrap">
  <div class="text-center">

    <!-- Big 404 number -->
    <div class="err-code">404</div>

    <!-- Divider line -->
    <div class="err-divider"></div>

    <!-- Message -->
    <h2 class="fw-bold mb-2" style="font-size:1.6rem;">Oops! Page Not Found</h2>
    <p class="text-muted mb-4" style="max-width:400px;margin:0 auto;">
      The page you're looking for doesn't exist, may have been moved, or the link is incorrect.
    </p>

    <!-- Navigation buttons -->
    <div class="d-flex flex-wrap gap-3 justify-content-center">
      <a href="/" class="btn btn-primary px-4 py-2 fw-semibold rounded-pill shadow-sm">
        <i class="bi bi-house-fill me-2"></i>Go to Home
      </a>
      <a href="{% url 'courses:course_list' %}" class="btn btn-outline-primary px-4 py-2 fw-semibold rounded-pill">
        <i class="bi bi-book me-2"></i>Browse Courses
      </a>
      {% if user.is_authenticated %}
      <a href="{% url 'dashboard:redirect' %}" class="btn btn-outline-secondary px-4 py-2 fw-semibold rounded-pill">
        <i class="bi bi-speedometer2 me-2"></i>Dashboard
      </a>
      {% endif %}
    </div>

    <!-- Search tip -->
    <p class="mt-5 text-muted small">
      <i class="bi bi-lightbulb me-1 text-warning"></i>
      If you think this is a mistake, please contact the administrator.
    </p>

  </div>
</div>
{% endblock %}